<template>
  <EditOrViewTable :table-data="tableData" :type="type" :setting="setting" />
</template>
<script>
import EditOrViewTable from './editOrViewTable'
export default {
  name: 'ContactsTable',
  components: {
    EditOrViewTable
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: 'view'
    },
    title: {
      type: String,
      default: ''
    },
    excludeRequireds: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      setting: [
        {
          prop: 'name',
          label: '联系人姓名',
          required: this.type === 'edit',
          minWidth: 140,
          editRender: (h, row) => {
            return h('el-input', {
              props: {
                value: row.name,
                placeholder: '请输入',
                clearable: true
              },
              attrs: {
                placeholder: '请输入',
                clearable: true
              },
              on: {
                input: v => {
                  this.$set(row, 'name', v)
                }
              },
              nativeOn: {
                click: e => e.stopPropagation()
              }
            })
          }
        },
        {
          prop: 'contactTypeName',
          label: '联系人类别',
          required: this.type === 'edit',
          minWidth: 200,
          overflowHidden: false,
          editRender: (h, row) => {
            return h('c-common-search-mdm', {
              props: {
                value: row.contactTypeCode,
                label: row.contactTypeName,
                placeholder: '请选择',
                custDocCode: 'QY019'
              },
              on: {
                input: v => this.$set(row, 'contactTypeCode', v),
                'update:label': v => this.$set(row, 'contactTypeName', v)
              },
              nativeOn: {
                click: e => e.stopPropagation()
              }
            })
          }
        },
        {
          prop: 'contactTel',
          label: '联系人电话',
          minWidth: 140,
          editRender: (h, row) => {
            return h('el-input', {
              props: {
                value: row.contactTel,
                placeholder: '请输入',
                clearable: true
              },
              attrs: {
                placeholder: '请输入',
                clearable: true
              },
              on: {
                input: v => {
                  this.$set(row, 'contactTel', v)
                }
              },
              nativeOn: {
                click: e => e.stopPropagation()
              }
            })
          }
        },
        {
          prop: 'contactPhone',
          label: '联系人手机',
          required: this.type === 'edit',
          minWidth: 140,
          editRender: (h, row) => {
            return h('el-input', {
              props: {
                value: row.contactPhone,
                placeholder: '请输入',
                clearable: true
              },
              attrs: {
                placeholder: '请输入',
                clearable: true
              },
              on: {
                input: v => {
                  this.$set(row, 'contactPhone', v)
                }
              },
              nativeOn: {
                click: e => e.stopPropagation()
              }
            })
          }
        },
        {
          prop: 'contactFax',
          label: '联系人传真',
          minWidth: 140,
          editRender: (h, row) => {
            return h('el-input', {
              props: {
                value: row.contactFax,
                placeholder: '请输入',
                clearable: true
              },
              attrs: {
                placeholder: '请输入',
                clearable: true
              },
              on: {
                input: v => {
                  this.$set(row, 'contactFax', v)
                }
              },
              nativeOn: {
                click: e => e.stopPropagation()
              }
            })
          }
        },
        {
          prop: 'email',
          label: '联系人邮箱',
          required: this.type === 'edit' && !this.excludeRequireds.includes('email'),
          minWidth: 140,
          editRender: (h, row) => {
            return h('el-input', {
              props: {
                value: row.email,
                placeholder: '请输入',
                clearable: true
              },
              attrs: {
                placeholder: '请输入',
                clearable: true
              },
              on: {
                input: v => {
                  this.$set(row, 'email', v)
                }
              },
              nativeOn: {
                click: e => e.stopPropagation()
              }
            })
          }
        },
        {
          prop: 'address',
          label: '联系人地址',
          minWidth: 140,
          editRender: (h, row) => {
            return h('el-input', {
              props: {
                value: row.address,
                placeholder: '请输入',
                clearable: true
              },
              attrs: {
                placeholder: '请输入',
                clearable: true
              },
              on: {
                input: v => {
                  this.$set(row, 'address', v)
                }
              },
              nativeOn: {
                click: e => e.stopPropagation()
              }
            })
          }
        }
      ]
    }
  },
  methods: {
    validate() {
      const regPhone = /^1\d{10}$/
      const regTel = /^[0-9]{3,4}-?[0-9]{7,8}$/
      const requiredKeys = {
        name: '联系人姓名',
        contactTypeCode: '联系人类别',
        contactPhone: '联系人手机',
        email: '联系人邮箱'
      }
      const errMsgs = []
      for (let i = 0; i < this.tableData.length; i++) {
        const item = this.tableData[i]
        if (item.contactPhone && !regPhone.test(item.contactPhone)) {
          errMsgs.push(`请检查【${this.title}】第${i + 1}行联系人手机格式!`)
        }
        // 电话
        if (item.contactTel && !regTel.test(item.contactTel)) {
          errMsgs.push(`请检查【${this.title}】第${i + 1}行联系人电话格式!`)
        }
        // 邮箱
        if (item.email && !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(item.email)) {
          errMsgs.push(`请检查【${this.title}】第${i + 1}行联系人邮箱格式!`)
        }
        // 必填
        for (const [k, msg] of Object.entries(requiredKeys)) {
          if (this.excludeRequireds.includes(k)) {
            continue
          }
          const v = item[k]
          if (v === undefined || v === null || v === '') {
            errMsgs.push(`【${this.title}】第${i + 1}行【${msg}】必填(选)!`)
          }
        }
      }
      if (errMsgs.length > 0) {
        this.$message({
          type: 'warning',
          message: errMsgs.join('<br>'),
          dangerouslyUseHTMLString: true
        })
        return Promise.reject(errMsgs)
      }
      return Promise.resolve(this.tableData)
    }
  }
}
</script>
